<div id="app" v-cloak>
    <el-row :gutter="20" class="no-margin">
        <el-col :span="12">
            <kf-table :url="urls.url" :pks="['roleId']" ref="table" highlight-current-row v-on:row-click="roleRowClick" height="490"  one-screen :title="roleFormTitle">
                <el-table-column prop="roleCode" label="角色编码"></el-table-column>
                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                <el-table-column prop="roleStatus" label="状态">
                    <template scope="scope">
                        <el-tag :type="scope.row.roleStatus=='1'?'success':'warning'" close-transition>{{scope.row.roleStatus=='1'?'正常':'失效'}}</el-tag>
                    </template>
                </el-table-column>
                <!--<el-table-column label="所属团队">-->
                    <!--<template scope="scope">-->
                        <!--{{(scope.row.teamPo || {}).teamName || "所有团队" }}-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <div slot="editForm">
                    <el-form :model="formData" :rules="rules" ref="editForm">
                        <el-form-item label="角色编码" prop="roleCode" :label-width="formLabelWidth">
                            <el-input v-model="formData.roleCode" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        <el-form-item label="角色名称" prop="roleName" :label-width="formLabelWidth">
                            <el-input v-model="formData.roleName" auto-complete="off">{{formData}}</el-input>
                        </el-form-item>
                        <!--<el-form-item label="所属团队" prop="teamId" :label-width="formLabelWidth">-->
                            <!--<el-select v-model="formData.teamId" placeholder="请选择团队">-->
                                <!--<el-option label="所有团队" value="ALL" v-if="currTeam.teamId=='SysTeam' || currTeam.teamLevel=='1'"></el-option>-->
                                <!--<el-option v-for="(item,index) in teamsData" :key="index+1" :label="item.teamName" :value="item.teamId"></el-option>-->
                            <!--</el-select>-->
                        <!--</el-form-item>-->
                        <el-form-item label="角色状态" prop="roleStatus" :label-width="formLabelWidth">
                            <el-switch on-text="正常" on-value="1" off-text="失效" off-value="0" v-model="formData.roleStatus"></el-switch>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="formBtn">
                    <el-button @click="formCancle()" size="small">取 消</el-button>
                    <el-button type="primary" @click="formConfirm()" size="small" :disabled="disableSaveBtn">保存</el-button>
                </div>
                <el-form :inline="true" :model="formData" slot="tools">
                    <el-form-item >
                       <!-- <el-input class="el-input&#45;&#45;small" v-model="formInput.key" placeholder="请输入角色名称关键字" size="small"  class="input-username">-->
                        <el-input class="el-input--small" v-model="formInput.key" placeholder="请输入角色名称关键字" size="small">
                            <el-button slot="append" icon="search" @click="onSearchFwRole" title="点击查询"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addFwRole" size="small"><i class="el-icon-plus" ></i> 新增</el-button>
                        <el-button @click="handleEdit" type="primary" icon="edit" size="small">修改</el-button>
                    </el-form-item>
                </el-form>
            </kf-table>
        </el-col>
        <el-col :span="12">
            <div style="height: 30px;margin-top: 10px;">
                <el-form :inline="true" :model="formData" slot="tools">
                    <el-form-item >
                        <el-input class="el-input--small" v-model="filterMenuKey" placeholder="请输入模块名称关键字" size="small"  class="input-username" icon="search">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveRoleModule" size="small"><i class="el-icon-save" ></i> 保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="consume-panel" style="    margin-top: 12px;">
                <div class="tree" >
                    <div class="tree-header" >
                        <div class="tree-header__title">{{currentRoleName}}:菜单授权</div>
                    </div>
                    <div class="tree-body">
                        <el-tree :data="roleModuleData" ref="roleModuleTree" :filter-node-method="filterTree"
                                 show-checkbox node-key="id" :check-strictly="false">
                        </el-tree>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</div>